<script setup lang="ts">
import type { PointGroupDetail } from '@/types/symmetry'
import { formatMulliken, formatSeitz } from '@/utils/formatters'
import { renderInline } from '@/utils/katex'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

interface Props {
  group: PointGroupDetail
}

const props = defineProps<Props>()
const { t } = useI18n()

// 格式化数值，保留必要的小数位
const formatNumber = (val: number) => {
  if (Math.abs(val) < 1e-10) return '0'
  if (Math.abs(val - Math.round(val)) < 1e-6) return Math.round(val).toString()
  return parseFloat(val.toFixed(3)).toString()
}

// 格式化复数值为简洁形式
const formatComplex = (val: { real: number; imag: number }) => {
  const { real, imag } = val
  const threshold = 1e-10

  // 纯实数
  if (Math.abs(imag) < threshold) {
    return formatNumber(real)
  }

  // 纯虚数
  if (Math.abs(real) < threshold) {
    const imagStr = formatNumber(imag)
    if (imagStr === '1') return 'i'
    if (imagStr === '-1') return '-i'
    return `${imagStr}i`
  }

  // 复数
  const realStr = formatNumber(real)
  const imagVal = Math.abs(imag)
  const imagStr = formatNumber(imagVal)

  const sign = imag >= 0 ? '+' : '-'
  const iPart = imagStr === '1' ? 'i' : `${imagStr}i`

  return `${realStr}${sign}${iPart}`
}

// 格式化矩阵为 LaTeX（简洁格式）
const formatMatrix = (matrix: { real: number; imag: number }[][]) => {
  if (!matrix || matrix.length === 0) return ''

  const rows = matrix.map(row => row.map(val => formatComplex(val)).join(' & ')).join(' \\\\ ')
  return `\\begin{pmatrix} ${rows} \\end{pmatrix}`
}

// 获取所有 irrep 标签
const irrepLabels = computed(() => {
  if (!props.group.operations || !props.group.operations.length) return []
  for (const op of props.group.operations) {
    if (op.irrepMatrices) {
      return Object.keys(op.irrepMatrices)
    }
  }
  return []
})
</script>

<template>
  <div class="space-y-4">
    <div v-if="irrepLabels.length" class="w-full overflow-x-auto">
      <table class="table-zebra table [&_td]:text-center [&_th]:text-center">
        <thead>
          <tr>
            <th>ID</th>
            <th>{{ t('views.pointGroupDetail.operations.seitz') }}</th>
            <th v-for="label in irrepLabels" :key="label" v-html="renderInline(formatMulliken(label))"></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="op in group.operations" :key="op.id">
            <!-- ID -->
            <td class="font-mono">{{ op.id }}</td>

            <!-- Seitz Symbol -->
            <td v-html="renderInline(formatSeitz(op.seitz))"></td>

            <!-- Irrep 矩阵列 -->
            <td v-for="label in irrepLabels" :key="`${op.id}-${label}`">
              <span v-if="op.irrepMatrices?.[label]" v-html="renderInline(formatMatrix(op.irrepMatrices[label]))"></span>
              <span v-else class="text-xs opacity-50">-</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 空状态 -->
    <div v-else class="flex-center min-h-[200px] flex-col gap-4">
      <div class="text-4xl">🔢</div>
      <p class="text-sm opacity-70">{{ t('views.pointGroupDetail.matrices.noIrreps') }}</p>
    </div>
  </div>
</template>
